<template>
    <div class="container" ref="containerRef">
        <div class="item" v-for="(itemData, index) in items" :key="index">
            <div class="menu">{{ itemData.menuName }}</div>
            <div class="gap"></div>
        </div>
    </div>
</template>
  
<script setup>
import { onMounted, ref } from 'vue';

const containerRef = ref(null);
const items = ref([
    { menuName: '菜单 1' },
    { menuName: '菜单 2' },
    { menuName: '菜单 3' },
    { menuName: '菜单 4' },
    { menuName: '菜单 5' },
    { menuName: '菜单 6' },
    { menuName: '菜单 7' },
    { menuName: '菜单 8' },
    { menuName: '菜单 9' },
    { menuName: '菜单 10' },
    { menuName: '菜单 11' },
    { menuName: '菜单 12' }
]);

onMounted(() => {
    const container = containerRef.value;
    const itemElements = container.querySelectorAll('.item');

    itemElements.forEach((item, index) => {
        item.addEventListener('mouseover', () => {
            if (index === 0) {
                itemElements[index].style.setProperty('--scale', '1.6');
                itemElements[index + 1].style.setProperty('--scale', '1.4');
                itemElements[index + 2].style.setProperty('--scale', '1.2');
                itemElements.forEach((it, i) => {
                    if (i !== index && i !== index + 1 && i !== index + 2) {
                        it.style.setProperty('--scale', '1');
                    }
                });
            } else if (index === 1) {
                itemElements[index - 1].style.setProperty('--scale', '1.4');
                itemElements[index].style.setProperty('--scale', '1.6');
                itemElements[index + 1].style.setProperty('--scale', '1.4');
                itemElements[index + 2].style.setProperty('--scale', '1.2');
                itemElements.forEach((it, i) => {
                    if (i !== index - 1 && i !== index && i !== index + 1 && i !== index + 2) {
                        it.style.setProperty('--scale', '1');
                    }
                });
            } else if (index === itemElements.length - 1) {
                itemElements[index - 2].style.setProperty('--scale', '1.2');
                itemElements[index - 1].style.setProperty('--scale', '1.4');
                itemElements[index].style.setProperty('--scale', '1.6');
                itemElements.forEach((it, i) => {
                    if (i !== index && i !== index - 1 && i !== index - 2) {
                        it.style.setProperty('--scale', '1');
                    }
                });
            } else if (index === itemElements.length - 2) {
                itemElements[index - 2].style.setProperty('--scale', '1.2');
                itemElements[index - 1].style.setProperty('--scale', '1.4');
                itemElements[index].style.setProperty('--scale', '1.6');
                itemElements[index + 1].style.setProperty('--scale', '1.4');
                itemElements.forEach((it, i) => {
                    if (i !== index - 2 && i !== index - 1 && i !== index && i !== index + 1) {
                        it.style.setProperty('--scale', '1');
                    }
                });
            } else {
                itemElements[index - 2].style.setProperty('--scale', '1.2');
                itemElements[index - 1].style.setProperty('--scale', '1.4');
                itemElements[index].style.setProperty('--scale', '1.6');
                itemElements[index + 1].style.setProperty('--scale', '1.4');
                itemElements[index + 2].style.setProperty('--scale', '1.2');
                itemElements.forEach((it, i) => {
                    if (i !== index - 2 && i !== index - 1 && i !== index && i !== index + 1 && i !== index + 2) {
                        it.style.setProperty('--scale', '1');
                    }
                });
            }
        });
    });

    container.addEventListener('mouseleave', () => {
        itemElements.forEach(item => {
            item.style.setProperty('--scale', '1');
        });
    });
});
</script>
<style scoped>
.container {
    margin: auto;
    padding: 15px;
    position: fixed;
    left: 50%;
    translate: -50% 0;
    bottom: 20px;
    height: 80px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
}

.item {
    --scale: 1;
    padding-bottom: calc((var(--scale) * 50px) - (50px / var(--scale)));
    height: 100%;
    display: flex;
    align-items: flex-end;
    transition: all 0.35s;
}

.menu {
    width: calc(50px * var(--scale));
    height: calc(50px * var(--scale));
    background: #000;
    border-radius: calc(10px * var(--scale));
    transition: all 0.35s;
    cursor: pointer;
    color: #ffffff;
    text-align: center;
    line-height: calc(50px * var(--scale));
}

.gap {
    width: calc(15px * var(--scale));
    height: 50px;
    background: transparent;
    transition: all 0.35s;
}
</style>